<template>
	<view class="content">
		<view class="banner-container">
			<swiper class="banner" indicator-dots="true" autoplay="true">
				<swiper-item v-for="item in bannerList" :key="item.id">
					<image class="banner-image" :src="item.bannerUrl" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="shop-container">
			<view class="shop-header">
				<view class="shop-title">热门店铺</view>
				<view class="shop-selector">
					<view class="btn-selector btn-selector-active" @click="switchSelector" data-order="distance">
						<text>距离</text>
					</view>
					<view class="btn-selector" @click="switchSelector" data-order="favorable_rate">
						<text>好评</text>
					</view>
				</view>
			</view>
			<view class="shop-list">
				<shop-item v-for="item in shopList" @order-event="orderShop" :key="item.id"  :info="item" :distance="item.distance | distanceFilter"></shop-item>
			</view>
			<view style="height: 150rpx; text-align: center;">
				<uni-load-more :status="loadMoreStatus" showIcon="true" :content-text="loadMoreText" ></uni-load-more>
			</view>
		</view>
		<button @click="neetToLogin">需要登录权限的功能</button>
	</view>
</template>

<script>
	import ShopItem from '@/components/shop-item'
	import {uniLoadMore} from '@dcloudio/uni-ui'
	export default {
		components: {
			ShopItem,
			uniLoadMore
		},
		data() {
			return {
				bannerList: [
				],
				order: 'distance',
				location: {
					latitude: 0,
					longitude: 0
				},
				shopListPager: {
					currentPage: 1,
					pageSize: 3,
					count: 0,
					totalPage: 1
				},
				shopList: [],
				loadMoreStatus: 'more',
				loadMoreText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		created() {
			this.loadBanner()
			this.loadShopList()
		},
		methods: {
			// 登录跳转订单商店
			orderShop(shop){
				this.$login.checkTokenValidity().then(() => {
					shop = JSON.stringify(shop)
					uni.navigateTo({
						url: `../order/order-appointment/order-appointment?shop=${shop}`
					})
				}).catch(() => {
					this.$msg.showToast("请先登录")
				})
			},
			neetToLogin() {
				this.$login.checkTokenValidity().then(() => {
					console.log('权限没问题，开始做')
					this.$websocket.sendData({
						orderId: 309,
						orderStep: 1,
						notifyShopId: 5
					})
				}).catch(() => {
					console.log('没权限，做不了')
				})
			},
			// 加载banner
			loadBanner() {
				this.$api.get({
					url: '/open/banner/list'
				}).then(res => {
					this.bannerList = res.data.data
					console.log('成功')
				}).catch(res => {
					console.log('失败')
				})
			},
			// 初始化坐标
			initLocation() {
				uni.authorize({
				    scope: 'scope.userLocation',
				    success() {
				        uni.getLocation({
				            type: 'gcj02',
				            success(res) {
				        		this.location.latitude = res.latitude;
				        		this.location.longitude = res.longitude;
								console.log('my location:' + res.latitude + ',' + res.longitude)
								this.loadShopList(this.shopListPager.currentPage)
				            }
				        });
				    }
				})
			},
			// 加载商店列表
			loadShopList(currentPage) {
				this.loadMoreStatus = 'loading';
				this.$api.get({
					url: '/open/shop/list',
					data: {
						order: this.order,
						latitude: this.location.latitude,
						longitude: this.location.longitude,
						page: currentPage - 1,
						size: this.shopListPager.pageSize
					}
				}).then(resp => {
					this.shopList = currentPage > 1 ? this.shopList.concat(resp.data.data) : resp.data.data
					this.shopListPager.count = resp.data.count
					this.shopListPager.totalPage = resp.data.totalPage
					this.loadMoreStatus = this.shopListPager.currentPage < this.shopListPager.totalPage ? 'more' : 'noMore';
				}).catch((err) => {
					this.loadMoreStatus = 'more';
				})
			},
			// 更新页码
			onLoadShopListByPage() {
				let currentPage = this.shopListPager.currentPage;
				let totalPage = this.shopListPager.totalPage;
				if (currentPage < totalPage) {
					currentPage += 1;
					this.shopListPager.currentPage = currentPage;
					this.loadShopList(currentPage)
				}
			},
			switchSelector(event) {
				let order = event.currentTarget.dataset.order;
				this.order = order;
				this.shopListPager.currentPage = 1;
				this.shopListPager.count = 0;
				this.shopListPager.totalPage = 1;
				this.loadShopList(this.shopListPager.currentPage)
			}
		},
		// 全局过滤器
		filters: {
			distanceFilter(value) {
				return Number(value / 1000).toFixed(1)
			}
		}
	}
</script>

<style>

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.banner {
		height: 300rpx;
	}
	.banner-container {
		width: 100%;
		height: 300rpx;
	}
	.banner-image {
		width: 100%;
		height: 300rpx;
	}
	.shop-container {
		width: 100%;
		padding: 50rpx 0;
		display: flex;
		flex-direction: column;
	}
	.shop-header {
		padding: 0 50rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.shop-title {
		font-size: 40rpx;
		color: #333333;
	}
	.shop-selector {
		width: 260rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	.btn-selector {
		width: 100rpx;
		text-align: center;
	}
	.btn-selector-active {
		line-height: 50rpx;
		border-radius: 50rpx;
		background-color: #008d29;
		color: #ffffff;
	}
	.shop-list {
		padding: 0 50rpx;
		display: flex;
		flex-direction: column;
	}
</style>
